<template>
  <div class="mind-box">
    <!-- 左侧 -->
    <el-scrollbar class="mind-l">
      <div class="ml-m">
        <div class="guanzhu" style="padding: 20px;left: 0px">
          <h2 class="hometitle ml-ht">图谱列表</h2>
          <div class="ml-a-box" style="min-height:500px">
            <el-tag
              @click="matchDomainGraph(m)"
              v-for="(m, index) in pageModel.nodeList"
              :key="index"
              :type="m.type"
              effect="dark"
              :title="m.name"
              class="tag-ml-5"
            >
              {{ m.name }}
            </el-tag>
          </div>
          <div class="fr">
            <a
              href="javascript:void(0)"
              class="svg-a-sm"
              v-show="pageModel.pageIndex > 1"
              @click="prev"
            >上一页</a
            >
            <a
              href="javascript:void(0)"
              class="svg-a-sm"
              v-show="pageModel.pageIndex < pageModel.totalPage"
              @click="next"
            >下一页</a
            >
          </div>
        </div>
      </div>
    </el-scrollbar>
    <!-- 左侧over -->

    <!-- 右侧 -->
    <div class="mind-con">
      <!-- 头部 -->
      <!-- 头部over -->

      <!-- 中部 -->
      <div class="mind-cen" id="qacontainerdiv">
        <div id="qaContainer" class="qaContainer">
          <kg-answer
            ref="answer"
            :domain="domain"
            :domainId="domainId"
          />
        </div>
      </div>
      <!-- 中部over -->
    </div>
    <!-- 右侧over -->
  </div>
</template>

<script>
import KgAnswer from "./components/kg_answer";
import {kgBuilderApi} from "@/api"
import { EventBus } from "@/utils/event-bus";
export default {
  name: 'qa',
  components: {
    KgAnswer
  },
  data() {
    return {
      style: null,
      width: null,
      height: null,
      _thisView: null,
      domain: "",
      domainId: 0,
      domainAlia:"",
      pageModel: {
        pageIndex: 1,
        pageSize: 30,
        totalCount: 0,
        totalPage: 0,
        nodeList: []
      },
    }
  },
  filters: {
    labelFormat: function(value) {
      let domain = value.substring(1, value.length - 1);
      return domain;
    }
  },

  mounted() {
  },

  created() {
    this.getDomain();
    this.$nextTick(() => {
      this.width = document.getElementsByClassName(
        "qaContainer"
      )[0].offsetWidth;
      //this.height = document.getElementsByClassName('graphContainer')[0].offsetHeight
      this.height = window.screen.height;
      this.style = {
        width: this.width + "px",
        height: this.height + "px"
      };
      //console.log(this.width, this.height)
      EventBus.$emit("DIV", this.width, this.height);
    });
  },

  methods: {
    _thisKey(item) {
      this._thisView = item;
    },
    Dset(item) {
      this.d3 = item;
    },
    prev() {
      if (this.pageModel.pageIndex > 1) {
        this.pageModel.pageIndex--;
        this.getDomain();
      }
    },
    next() {
      if (this.pageModel.pageIndex < this.pageModel.totalPage) {
        this.pageModel.pageIndex++;
        this.getDomain();
      }
    },
    getLabels(data) {
      kgBuilderApi.getDomains(data).then(result => {
        if (result.code === 200) {
          this.pageModel = result.data;
          this.pageModel.totalPage =
            parseInt((result.data.totalCount - 1) / result.data.pageSize) + 1;
          this.pageModel.nodeList.map(n => {
            n.type = "";
            return n;
          });
        }
      })
    },
    getDomain(pageIndex) {
      this.pageModel.pageIndex = pageIndex
        ? pageIndex
        : this.pageModel.pageIndex;
      let data = {
        pageIndex: this.pageModel.pageIndex,
        pageSize: this.pageModel.pageSize,
        command: 0
      };
      this.getLabels(data);
    },
    matchDomainGraph(domain) {
      this.domain = domain.name;
      this.domainAlia = domain.name;
      this.domainId = domain.id;
      this.pageModel.nodeList.map(n => {
        if (n.name === domain.name) {
          n.type = "success";
        } else {
          n.type = "";
        }
        return n;
      });
    }
  }


}
</script>

<style>
.qaContainer {
  height: calc(100vh - 50px);
}

.mind-box {
  height: calc(100vh - 85px);
  overflow: hidden;
}

.mind-l {
  /*display: flex;*/
  position: fixed;
  width: 22%;
  left: 0;
  background: #f7f9fc;
  height: 100%;
  border-right: 1px solid #d3e2ec;
}

.ml-ht {
  padding-top: 20px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #333;
  border-bottom: 1px solid #d3e2ec;
}

.ml-a-box {
  margin: 10px;
}

.ml-a span {
  max-width: 190px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.ml-a span:empty:before {
  content: "閺堫亜鎳￠崥锟�";
  color: #adadad;
}

.ml-a small {
  color: #999;
}

.ml-a.cur small {
  background: #156498;
  color: #fff;
}

.tag-ml-5 {
  margin: 5px;
  cursor: pointer;
  float: left
}

.svg-a-sm {
  font-size: 14px;
  color: #156498;
  margin-right: 30px;
}
</style>
